<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="800"
    @close="handleClose"
  >
    <el-row :gutter="20" class="materialModel">
      <el-col
        v-for="(o, index) in dataList"
        :key="index"
        :span="6"
        class="materialModel-el"
      >
        <el-card
          :body-style="{ padding: '0px !important' }"
          @click="checkImg(index)"
          :class="{ active: o.bOn }"
        >
          <img :src="o.url" class="w-100%" v-if="dialogParam.type == 'image'" />
          <div v-else-if="dialogParam.type == 'audio'">
            <video class="w-100%" controls>
              <source :src="o.url" type="video/mp3" />
            </video>
          </div>
          <div v-else>
            <video class="w-100%" controls>
              <source :src="o.url" type="video/ogg" />
              <source :src="o.url" type="video/mp4" />
              <source :src="o.url" type="video/webm" />
              <object :data="o.url" class="100%">
                <embed width="320" height="240" :src="o.url" />
              </object>
            </video>
          </div>
          <div class="flex justify-between p-10px">
            <span>{{ o.name }}</span>
            <span class="text-#f00">{{ o.groupName }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="SubmitBtn"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script name="networkModel" setup>
const props = defineProps({
  // 弹出框是否显示
  dialogParam: {
    required: true
  }
})
const data = reactive({
  dialogVisible: false,
  title: '',
  dataList: [],
  IdataList: [
    {
      id: '001',
      name: '001',
      groupName: '总账号',
      bOn: false,
      url: 'http://browser9.qhimg.com/bdm/480_296_0/t01bbd94b90e850d1d3.jpg'
    },
    {
      id: '002',
      name: '002',
      bOn: false,
      groupName: '总账号',
      url: 'http://browser9.qhimg.com/bdm/480_296_0/t01bbd94b90e850d1d3.jpg'
    },
    {
      id: '003',
      name: '003',
      bOn: true,
      groupName: '总账号',
      url: 'http://browser9.qhimg.com/bdm/480_296_0/t01bbd94b90e850d1d3.jpg'
    },
    {
      id: '004',
      name: '004',
      bOn: true,
      groupName: '总账号',
      url: 'http://browser9.qhimg.com/bdm/480_296_0/t01bbd94b90e850d1d3.jpg'
    }
  ],
  AdataList: [
    {
      id: '001',
      name: '001',
      groupName: '总账号',
      bOn: false,
      url: 'https://www.runoob.com/try/demo_source/horse.mp3'
    },
    {
      id: '002',
      name: '002',
      bOn: false,
      groupName: '总账号',
      url: 'https://www.runoob.com/try/demo_source/horse.mp3'
    },
    {
      id: '003',
      name: '003',
      bOn: false,
      groupName: '总账号',
      url: 'https://www.runoob.com/try/demo_source/horse.mp3'
    },
    {
      id: '004',
      name: '004',
      bOn: false,
      groupName: '总账号',
      url: 'https://www.runoob.com/try/demo_source/horse.mp3'
    }
  ],
  VdataList: [
    {
      id: '001',
      name: '视频',
      groupName: '总账号',
      bOn: false,
      url: 'https://www.runoob.com/try/demo_source/movie.ogg'
    },
    {
      id: '002',
      name: '002',
      bOn: false,
      groupName: '总账号',
      url: 'https://www.runoob.com/try/demo_source/movie.ogg'
    },
    {
      id: '003',
      name: '003',
      bOn: false,
      groupName: '总账号',
      url: 'https://www.runoob.com/try/demo_source/movie.ogg'
    },
    {
      id: '004',
      name: '004',
      bOn: false,
      groupName: '总账号',
      url: 'https://www.runoob.com/try/demo_source/movie.ogg'
    }
  ]
})
const { dialogVisible, title, IdataList, dataList, AdataList, VdataList } =
  toRefs(data)
watch(
  () => props.dialogParam,
  val => {
    if (JSON.stringify(props.dialogParam) != '{}') {
      init()
    }
  },
  {
    deep: true,
    immediate: true
  }
)
// 初始化页面
async function init() {
  dialogVisible.value = props.dialogParam.isVisible
  title.value = props.dialogParam.title
  console.log(props.dialogParam.type, 'props.dialogParam.type')
  dataList.value = []
  if (props.dialogParam.type == 'video') {
    dataList.value = VdataList.value
  } else if (props.dialogParam.type == 'audio') {
    dataList.value = AdataList.value
  } else {
    console.log('sss')
    dataList.value = IdataList.value
  }
  console.log(dataList.value, '==')
  dataList.value.map(value => {
    value.bOn = false
  })
}
/**
 * 点击选中视频
 * @param {*} index
 */
const checkImg = index => {
  const temp = dataList.value[index]
  temp.bOn = !dataList.value[index].bOn
  dataList.value[index] = temp
}
const emit = defineEmits(['ok', 'close'])
const SubmitBtn = () => {
  dialogVisible.value = false
  const newData = JSON.parse(JSON.stringify(dataList.value))
  const filteredData = newData.filter(item => {
    return item.bOn === true
  })
  console.log('--004040', {
    type: props.dialogParam.type,
    data: filteredData
  })
  emit('ok', {
    type: props.dialogParam.type,
    data: filteredData
  })
}
const handleClose = () => {
  dialogVisible.value = false
  emit('close', false)
}
</script>
<style lang="scss">
.materialModel {
  .materialModel-el {
    cursor: pointer;
    .active {
      @apply w-100% h-100% block;
      border: 3px solid #2b89fd;
      -webkit-transform: rotate(0deg);
    }
    .active::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      border: 12px solid #2b89fd;
      border-top-color: transparent;
      border-left-color: transparent;
    }
    .active::after {
      content: '';
      display: block;
      width: 5px;
      height: 10px;
      position: absolute;
      right: 4px;
      bottom: 5px;
      border: 1px solid #fff;
      border-top-color: transparent;
      border-left-color: transparent;
      transform: rotate(45deg);
      cursor: pointer;
    }
  }
}
</style>
